// 导入node中的path模块来处理路径
const path = require('path')
// __dirname表示当前文件夹的存放路径
// 动态生成cover.less文件的绝对路径
const coverPath = path.join(__dirname, './src/cover.less')
// vue.config.js
module.exports = {
  publicPath: './',
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 直接覆盖变量
          // 'nav-bar-background-color': '#8df',
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          hack: `true; @import "${coverPath}";`
        }
      }
    }
  },
  // 增强 vue-cli 的 webpack 配置项
  configureWebpack: {
    // 打包优化
    externals: process.env.NODE_ENV === 'development' ? {} : {
      // import 时的包名称: window 全局的成员名称
      'highlight.js': 'hljs',
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      vant: 'vant',
      dayjs: 'dayjs',
      'socket.io-client': 'io',
      popmotion: 'popmotion'
    }
  },
  chainWebpack: config => {
    // config.plugin('html') 的作用，拿到html-webpack-plugin插件的当前配置项
    // 通过.tap() 方法，可以修改插件的配置项
    // 在.tap(fn) 方法中，接收一个function回调，在这个回调中进行修改
    // 在.tap() 的function回调中args就是当前的配置项，最终修改完成后一定要return修改后的最新配置项
    config
      .plugin('html')
      .tap(args => {
        // console.log(args)
        args[0].title = '头条'
        // 根据当前的变异模式，动态为mode赋值
        // 如果是npm run serve 则mode的值是development
        // 如果是npm run build 则mode的值是production
        args[0].mode = process.env.NODE_ENV
        // console.log(args)
        return args
      })
  }
}
